import { defineComponent, onMounted } from 'vue'
import styles from './player.module.scss' // 自动引用同名 CSS 文件
type PlayerItem = {
  id: string,
  url: string,
  name: string,
}
export default defineComponent({
  name: 'player-view',
  props: {
    layout: {
      type: String,
      default: '9',
    },
    list: {
      type: Array as () =>  PlayerItem[],
      default: () => [] ,
    }
  },
  setup(props, { slots }) {
    return () => (
      <div class={[styles['player-layout__container'], styles[`player-layout__${props.layout}`]]}>
        {props.list.map(item => {
          return <video class={styles['player-layout__video']} autoplay={true} muted={true} src={item.url}></video>
        })}
      </div>
    )
  },
})
